<template>
    <el-dialog
        class="custom-modal"
        :title="title"
        :visible.sync="show"
        append-to-body
        top="20vh"
        @open="_open"
        @close="_close"
        @closed="_afterClose"
        v-auto-focus
    >
        <div class="option-value-box">
            <validation-observer ref="observerRef">
                <el-form
                    class="custom-form"
                    label-position="right"
                    label-width="0"
                    ref="formRef"
                >
                    <ul class="option-value__ul">
                        <template v-for="(item,index) in valueList">
                            <li class="option-value__li" :key="item._key">
                                <div class="option-value__li-text">
                                    <validation-provider
                                        :name="`item${index}.label`"
                                        :vid="`item${index}.label`"
                                        :rules="{ required: true, regex: /^[^,]+$/ }"
                                        :customMessages="{ required: '请输入内容', regex: '请勿输入英文逗号' }"
                                        v-slot="{ errors }"
                                        slim
                                    >
                                        <el-form-item>
                                            <div
                                                class="cf__group"
                                                :class="{ error: errors.length > 0 }"
                                            >
                                                <div class="cf__group-info">
                                                    <el-input
                                                        v-model="item.label"
                                                        :disabled="item.disabled"
                                                        :name="`item${index}.label`"
                                                        placeholder="请输入内容"
                                                        :maxlength="50"
                                                        auto-complete="off"
                                                    >
                                                    </el-input>
                                                </div>
                                                <div class="cf__group-tips">
                                                    <template v-if="errors.length > 0">
                                                        {{ errors[0] }}
                                                    </template>
                                                    <template v-else>
                                                        内容长度不能超过50个字
                                                    </template>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </validation-provider>
                                </div>
                                <div class="option-value__li-btn" v-if="!item.disabled">
                                    <el-button type="text" @click="onRemove(item, index)">删除</el-button>
                                </div>
                            </li>
                        </template>
                        <li class="option-value__li">
                            <div class="option-value__li-text">
                                <el-button plain @click="onAdd">添加选项</el-button>
                            </div>
                        </li>
                    </ul>
                </el-form>
            </validation-observer>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button
                class="sure"
                type="primary"
                @click="sure"
                :loading="ajaxLoader"
                >保存</el-button
            >
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DragOptionForm extends Vue {
    title = "类型配置";
    show = false;
    ajaxLoader = false;
    ajaxIndex = 0;

    value = "";
    valueNew = "";
    valueList: any[] = [];

    async _open() {
        this.$emit("onopen");
        this.initData();
    }

    _close() {
        this.$emit("onclose");
    }

    _afterClose() {
        this.$nextTick(function() {
            this.$emit("onafterclose");
            this.$el.remove && this.$el.remove();
        });
    }

    loader(state: boolean) {
        if (state) {
            if (this.ajaxIndex === 0) this.ajaxLoader = true;
            this.ajaxIndex++;
        } else {
            setTimeout(() => {
                this.ajaxIndex--;
                if (this.ajaxIndex === 0) this.ajaxLoader = false;
            }, 300);
        }
    }

    close() {
        this.show = false;
    }

    async initData() {
        const valueList = this.value ? this.value.split(",").map((cur: any, index: any) => {
            return {
                label: cur,
                _key: index,
                disabled: true
            };
        }) : [];
        const newValueList = this.valueNew ? this.valueNew.split(",").map((cur: any, index: any) => {
            return {
                label: cur,
                _key: index,
                disabled: false
            };
        }) : [];
        this.valueList = valueList.concat(newValueList);
    }

    async sure() {
        const observerRef: any = this.$refs.observerRef;
        const validateResult: any = await observerRef.validate();
        if (validateResult) {
            const valueList = this.valueList.filter((cur: any) => !cur.disabled);
            this.$emit("sure", {
                value: valueList.map((cur: any) => cur.label).join(",")
            });
            return;
        }
        this.$message({
            duration: 3000,
            message: "请确保表单数据有效！",
            type: "error"
        });
    }

    onAdd() {
        if (this.valueList.length === 50) {
            this.$message({
                duration: 3000,
                message: "类型不能超过50个！",
                type: "error"
            });
            return;
        }
        this.valueList.push({
            label: "",
            _key: this.valueList.length + '-' + (+new Date()),
            disabled: false
        });
    }

    onRemove(item: any, index: any) {
        this.valueList.splice(index, 1);
    }
}
</script>
<style scoped lang="scss">
.custom-modal {
    margin: 0;
    & /deep/ {
        .el-dialog {
            width: 4.5rem;
        }
    }
    .dialog-footer {
        .el-button.sure {
            min-width: 100px;
        }
    }
    .option-value-box{
        width: 100%;
        height: 3rem;
        overflow: auto;
    }
    .option-value__ul{
        width: 100%;
    }
    .option-value__li{
        width: 100%;
        @include flexLayout(flex,normal,normal)
    }
    .option-value__li-text{
        padding: .1rem 0;
        flex: 1;
    }
    .option-value__li-btn{
        padding: .1rem;
        flex: 0 0 auto;
    }
}
</style>
